<template>
  <div class="order-details">
    <div class="header">
      <div class="back-button" @click="goBack">
        <i class="el-icon-arrow-left" />
        <span class="back-text" @click="$router.push(`/nested/menu2`)">返回</span>
        <span class="separator">|</span>
      </div>
      <h2 class="detail-title">运单详情</h2>
    </div>
    <div class="order-info">
      <div class="info-row">
        <p class="info-item">订单编号：{{ order.orderId }}</p>
        <p class="info-item">运单编号：{{ order.id }}</p>
        <p class="info-item">下单时间：{{ order.created }}</p>
        <p class="info-item">订单状态：{{ order.status }}</p>
        <p class="info-item">预计到达日期：{{ order.updated }}</p>
      </div>
    </div>

    <!-- 新增的基本信息模块 -->
    <div class="basic-info-module">
      <div class="module-header" @click="toggleBasicInfo">
        <span class="module-title">基本信息</span>
        <i class="el-icon-arrow-right" :class="{ 'expanded': isBasicInfoExpanded }" />
      </div>
      <div v-show="isBasicInfoExpanded" class="module-content">
        <div class="basic-info-row">
          <div class="sender-info">
            <h4 class="sub-title">发货方</h4>
            <p class="info-item">发货方姓名：{{ order.order
              .senderName }}</p>
            <!-- <p class="info-item">发货方地址：{{ order.senderCity.name }}</p> -->
            <p class="info-item">发货方电话：{{ order.order.senderPhone }}</p>
            <p class="info-item">详细地址：{{ order.order.senderAddress }}</p>
          </div>
          <div class="receiver-info">
            <h4 class="sub-title">收货方</h4>
            <p class="info-item">收货方姓名：{{ order.order.receiverName }}</p>
            <!-- <p class="info-item">收货方地址：{{ order.receiverCity.name }}</p> -->
            <p class="info-item">收货方电话：{{ order.order.receiverPhone }}</p>
            <p class="info-item">详细地址：{{ order.order.receiverAddress }}</p>
          </div>
        </div>

      </div>
    </div>

    <div class="basic-info-module">
      <div class="module-header" @click="toggleBasicInfo2">
        <span class="module-title">运输信息</span>
        <i class="el-icon-arrow-right" :class="{ 'expanded': isBasicInfoExpanded2}" />
      </div>
      <div v-show="isBasicInfoExpanded2" class="module-content">
        <div>累了，毁灭吧</div>
      </div>
    </div>
    <div class="basic-info-module">
      <div class="module-header" @click="toggleBasicInfo3">
        <span class="module-title">货品信息</span>
        <i class="el-icon-arrow-right" :class="{ 'expanded': isBasicInfoExpanded3 }" />
      </div>
      <div v-show="isBasicInfoExpanded3" class="module-content">
        <div class="basic-info-row">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>货品名称</th>
                <th>货品类型</th>
                <th>重量（千克）</th>
                <th>体积（立方）</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in items" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>
                  <span v-if="!item.editing">{{ item.name }}</span>
                  <input v-else v-model="item.name">
                </td>
                <td>
                  <span v-if="!item.editing">{{ item.type }}</span>
                  <input v-else v-model="item.type">
                </td>
                <td>
                  <span v-if="!item.editing">{{ item.weight }}</span>
                  <input v-else v-model="item.weight">
                </td>
                <td>
                  <span v-if="!item.editing">{{ item.volume }}</span>
                  <input v-else v-model="item.volume">
                </td>
                <td>
                  <template v-if="!item.editing">
                    <button class="edit-button" @click="editItem(item)">编辑</button>
                    <button class="delete-button" @click="deleteItem(item)">删除</button>
                  </template>
                  <template v-else>
                    <button class="save-button" @click="saveItem(item)">保存</button>
                    <button class="cancel-button" @click="cancelEdit(item)">取消</button>
                  </template>
                </td>
              </tr>
            </tbody>

          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getEmployeeDetail1 } from '@/api/order'

export default {
  data() {
    return {
      items: [
        { id: 1, name: '篮球鞋', type: '户外运动', weight: 1, volume: 0.0001 }
      // 其他货品信息对象...
      ],
      isBasicInfoExpanded3: true,
      amount: '',
      order: {
        // taskPickup: {
        //   courier: { name: '', mobile: '' },
        //   estimatedStartTime: '',
        //   estimatedEndTime: ''
        // },
        orderId: '',
        id: '',
        created: '',
        updated: '',

        pickupType: 1,
        memberId: '',
        waybillNumber: '--',
        createTime: '',
        status: '待取件',
        estimatedArrivalTime: '',
        // 发货
        order: {
          senderName: '张同学',
          senderCity: '辽宁沈阳皇姑',
          senderPhone: '12000001396',
          senderAddress: '城建北尚社区19号楼'
        },

        // 收货
        receiverName: '王同学',
        receiverCity: '湖北武汉武昌',
        receiverPhone: '12000001396',
        receiverAddress: '楚天传媒大厦三层302',

        distance: '1807.111km',
        mark: '暂无'

      },
      isBasicInfoExpanded: true,
      isBasicInfoExpanded1: true,
      isBasicInfoExpanded2: true
      // isBasicInfoExpanded3: true
    }
  },
  created() {
    // 如何获取路由参数的中id
    // if (this.$route.params.id) { this.getEmployeeDetail() }
    this.$route.params.id && this.getEmployeeDetail1()
  },
  methods: {
    async getEmployeeDetail1() {
      const { data } = await getEmployeeDetail1(this.$route.params.id)
      // this.order.pickupType = Number(data.pickupType)
      // console.log(res)
      this.order = data
    },
    goBack() {
      // 处理返回按钮的逻辑，例如返回上一页
      // 可以使用路由或其他方式实现
    },
    toggleBasicInfo() {
      this.isBasicInfoExpanded = !this.isBasicInfoExpanded
    },
    toggleBasicInfo1() {
      this.isBasicInfoExpanded1 = !this.isBasicInfoExpanded1
    },
    toggleBasicInfo2() {
      this.isBasicInfoExpanded2 = !this.isBasicInfoExpanded2
    },
    toggleBasicInfo3() {
      this.isBasicInfoExpanded3 = !this.isBasicInfoExpanded3
    },
    editItem(item) {
      console.log(123)
      item.editing = true
      this.getEmployeeDetail1()
    },
    cancelEdit(item) {
      item.editing = false
      this.getEmployeeDetail1()
    },
    saveItem(item) {
      // 执行保存逻辑，如发送请求更新数据等
      item.editing = false
      console.log('保存货品', item)
    },
    deleteItem(item) {
    // 执行删除货品的逻辑
    // 根据需要，您可以提示用户确认删除操作
      const confirmDelete = confirm('确定要删除吗？')
      if (confirmDelete) {
        const index = this.items.findIndex(i => i.id === item.id)
        if (index !== -1) {
          this.items.splice(index, 1) // 从数组中删除货品信息
          console.log('删除货品', item)
        }
      }
    }
  }
}
</script>

<style>
.order-details {
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.back-button i {
  font-size: 16px;
  margin-right: 5px;
}

.separator {
  margin: 0 20px;
}

.back-text {
  margin-left: 5px;
}

.detail-title {
  margin-left: 20px;
}

.order-info {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  flex: 1;
  margin-right: 20px;
}

.basic-info-module {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

.module-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.module-title {
  flex: 1;
  font-weight: bold;
}

.module-content {
  margin-top: 10px;
}

.module-content p {
  margin-bottom: 5px;
}

.expanded {
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}
.product-info-module {
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .module-header {
    background-color: #f5f5f5;
    padding: 5px;
    font-weight: bold;
  }

  .module-title {
    font-size: 18px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f5f5f5;
  }

  .edit-button,
  .delete-button {
    padding: 5px 10px;
    border: none;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
  }

  .edit-button:hover,
  .delete-button:hover {
    background-color: #0056b3;
  }
</style>

